<template>
    <div>
        <header>
            <van-image width="70" height="70" src="https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png" />
        </header>
        <section>
            <div>
                <div>
                    <div>
                        <div>
                            <input type="text" placeholder="手机号" @input="loginStore.phoneText"
                                @blur="loginStore.phoneTextVerify" maxlength="18" v-model="loginStore.phone">
                            <van-icon name="cross" v-if="loginStore.clearText" @click="loginStore.handleClearText" />
                        </div>
                        <button @click="getCodeto" :disabled="isdisCode">{{ codetext }}</button>
                    </div>
                    <div v-if="loginStore.isPhoneError">
                        {{ loginStore.errorText }}
                    </div>
                </div>

                <div>
                    <div>

                        <input type="text" placeholder="验证码" @input="loginStore.codeVerify" @blur="loginStore.codeVerify"
                            v-model="loginStore.code">
                    </div>

                </div>
            </div>
            <div>
                <van-button type="primary" color="red" :disabled="loginStore.inputPass" block
                    @click="goLogin">登录</van-button>
            </div>
            <div>
                <span @click="handleBack">继续使用游客浏览</span>
                <span @click="unableReceiveCode">收不到验证码</span>
            </div>            
        </section>
    </div>
</template>



<script setup>
import { defineStore } from "pinia";
import { Cell as vanCell, CellGroup as vanCellGroup, Icon as vanIcon, Image as VanImage, Button as vanButton, Field as vanField, showToast } from 'vant';
import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';
import { useRouter } from 'vue-router'
import useTabbarStore from '../../store/tabbarStore'
import useLoginStore from '../../store/loginStore'
import axios from "axios";
const store = useTabbarStore()
const loginStore = useLoginStore()
const router = useRouter()
const codetext = ref('获取验证码')
const isdisCode = ref(false)
const countdown = () => {
    if (!loginStore.getCode()) {
        showToast('验证码发送成功');
        let timer = null
        let num = 15
        codetext.value = `${num}S后重新获取`
        console.log(12131);
        isdisCode.value = true
        timer = setInterval(() => {
            if (num === 0) {
                codetext.value = '获取验证码'
                clearInterval(timer)
                isdisCode.value = false
            } else {
                num--
                codetext.value = `${num}S后重新获取`
                isdisCode.value = true
            }
        }, 1000)
    }
}
// 获取验证码
const getCodeto = () => {
    countdown()
}
// 验证码
const unableReceiveCode = () => {
    console.log('收不到验证码');
}
// 登录
const goLogin = () => {
    loginStore.logon(getUserInfo)
}
const getUserInfo = async (userId) => {
    let res = await axios({
        url: 'http://shop-api.phpclub.org.cn/home/user/index',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'bearer ' + userId
        }
    })
    loginStore.userInfo = res.data.data
    localStorage.setItem('userInfo', JSON.stringify(loginStore.userInfo))
    localStorage.setItem('HomeState', '1')
    router.push('./centers')
    // console.log(res.data);
    return res.data
}
onBeforeMount(() => {
    store.change(false)
    loginStore.phone = ''
    loginStore.code = ''

})
onBeforeUnmount(() => {
    store.change(true)
})
// 路由导航

const handleBack = () => {
    router.go(-1)
}


</script>

<style scoped lang="scss">
input {
    border: none;
}

section {
    padding: 0px 16px;

    &>:nth-child(1) {
        &>div:nth-child(1) {
            &>div:nth-child(1) {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 46px;

                border-bottom: 1px solid rgb(234, 234, 234);

                &>div {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                }

                &>button {
                    margin-left: 20px;
                    background-color: transparent;
                    border: none;

                }
            }

            &>div:nth-child(2) {
                margin-top: 10px;
                color: red;
            }
        }

        &>div:nth-child(2) {
            height: 46px;
            line-height: 46px;
            border-bottom: 1px solid rgb(234, 234, 234);
        }
    }

    &>:nth-child(2) {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    &>:nth-child(3) {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #6f7174;
        margin-top: 16px;
    }
}

:deep(.van-cell) {
    border-bottom: 1px solid rgb(232, 232, 232);
}

header {
    margin: 100px 0px 40px 0px;
    text-align: center;
}
</style>